(function () {
  var maroon = '#ad1d45';
  var amaranth = '#d9195c';
  var cerise = '#d62d75';
  var razzmatazz = '#ee2178';
  var illusion = '#f7b0cf';
  var pixels = [
    // Row 1
    { x: 1, y: 0, color: maroon },
    { x: 2, y: 0, color: amaranth },
    { x: 4, y: 0, color: amaranth },
    { x: 5, y: 0, color: cerise },

    // Row 2
    { x: 0, y: 1, color: amaranth },
    { x: 1, y: 1, color: razzmatazz },
    { x: 2, y: 1, color: razzmatazz },
    { x: 3, y: 1, color: amaranth },
    { x: 4, y: 1, color: razzmatazz },
    { x: 5, y: 1, color: illusion },
    { x: 6, y: 1, color: maroon },

    // Row 3
    { x: 0, y: 2, color: cerise },
    { x: 1, y: 2, color: amaranth },
    { x: 2, y: 2, color: amaranth },
    { x: 3, y: 2, color: maroon },
    { x: 4, y: 2, color: amaranth },
    { x: 5, y: 2, color: cerise },
    { x: 6, y: 2, color: maroon },

    // Row 4
    { x: 1, y: 3, color: maroon },
    { x: 2, y: 3, color: razzmatazz },
    { x: 3, y: 3, color: amaranth },
    { x: 4, y: 3, color: razzmatazz },
    { x: 5, y: 3, color: amaranth },

    // Row 5
    { x: 2, y: 4, color: amaranth },
    { x: 3, y: 4, color: cerise },
    { x: 4, y: 4, color: amaranth },

    // Row 6
    { x: 3, y: 5, color: razzmatazz },
  ];

  var Heart = function (selector) {
    this.heart = document.querySelector(selector);
    this.init();
  };

  Heart.prototype = {
    init: function () {
      this.pixels = pixels.map(function (pixel) {
        return new Rectangle(pixel);
      });
      this.fadePixels();
      this.draw();
      var heart = this;
    },
    fadePixels: function () {
      var pixels;
      var percent = this.heart.dataset.percent;
      var fadedCount = Math.ceil((this.pixels.length * (100 - percent)) / 100);
      for (var i = 0; i < fadedCount; i++) {
        pixels = this.visiblePixels();
        pixels[0].hide();
      }
    },
    hiddenPixels: function () {
      return this.pixels.filter(function (p) {
        return p.isHidden;
      });
    },
    visiblePixels: function () {
      return this.pixels.filter(function (p) {
        return !p.isHidden;
      });
    },
    draw: function () {
      this.pixels.forEach(function (p) {
        document.getElementById('pixels').appendChild(p.element);
      });
    },
  };

  var Rectangle = function (opts) {
    var namespace = 'http://www.w3.org/2000/svg';
    this.element = document.createElementNS(namespace, 'rect');
    this.size = 71;
    this.init(opts);
  };

  Rectangle.prototype = {
    init: function (opts) {
      this.isHidden = false;
      this.setAttr('x', opts.x * this.size);
      this.setAttr('y', opts.y * this.size);
      this.setAttr('width', this.size);
      this.setAttr('height', this.size);
      this.setAttr('fill', opts.color);
      this.element.style.animationDelay = 3 * Math.random() + 's';
    },
    setAttr: function (name, value) {
      this.element.setAttributeNS(null, name, value);
    },
    hide: function () {
      this.isHidden = true;
      this.setAttr('class', 'faded');
    },
    show: function () {
      this.isHidden = false;
      this.setAttr('class', '');
    },
  };

  new Heart('.fundraising-heart');
})();
